﻿<!doctype html>
<html class="no-js" lang="en" xmlns:th="https://www.thymeleaf.org/"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      layout:decorate="~{layout}">
<head>
</head>
<body>

<form action="/query" method="get" layout:fragment="form">
	<div class="search-form-input">
		<select id="select" class="nice-select">
			<option value="">所有商品</option>
		</select>
		<input type="text" name="all" th:value="${type.all}" placeholder="搜索...">
		<button class="top-search-btn" type="submit"><i class="ion-ios-search-strong"></i></button>
	</div>
</form>
	<div class="wrapper" layout:fragment="content">
		<!--Breadcrumb Area Start-->
		<div class="breadcrumb-area">
		    <div class="container">
		        <div class="row">
		            <div class="col-12">
		                <div class="breadcrumb-content text-center">
                            <h1 class="breadmome-name">商品</h1>
		                    <ul>
		                        <li><a href="/">返回主页</a></li>
		                        <li class="active">商品</li>
		                    </ul>
		                </div>
		            </div>
		        </div>
		    </div>
		</div>
		<!--Breadcrumb Area End-->
		<!--Shop Area Start-->
		<div class="shop-area mt-80">
		    <div class="container">
		        <div class="row">
		            <div class="col-lg-3 order-2 order-lg-1">
		                <!--Shop Product Categorie Start-->
		                <div class="shop-product-cate mb-20">
		                    <h3>商品分类</h3>
							<form action="/query" id="form" method="get">
								<input type="hidden" name="all" th:value="${type.all}">
								<input type="hidden" name="brand" th:value="${type.brand}">
								<input type="hidden" name="origin" th:value="${type.origin}">
								<input type="hidden" name="lowPrice" th:value="${type.lowPrice}">
								<input type="hidden" name="highPrice" th:value="${type.highPrice}">
								<input type="hidden" name="pageIdx">
								<input type="hidden" name="pageSize" th:value="${type.pageSize}">
								<input type="hidden" name="start" th:value="${type.start}">
							</form>
		                    <div id="shop-cate-toggle" class="category-menu sidebar-menu sidbar-style">
                                <ul class="category-sub-menu">
		                         <li class="has-sub"><a href="#">白酒</a>
		                             <ul class="category-sub">
										 <li><a href="javascript:;" class="a" data-name="茅台">茅台</a></li>
                                         <li><a href="javascript:;" class="a" data-name="五粮液">五粮液</a></li>
                                         <li><a href="javascript:;" class="a" data-name="剑南春">剑南春</a></li>
                                         <li><a href="javascript:;" class="a" data-name="郎酒">郎酒</a></li>
                                         <li><a href="javascript:;" class="a" data-name="汾酒">汾酒</a></li>
                                         <li><a href="javascript:;" class="a" data-name="泸州老窖">泸州老窖</a></li>
                                         <li><a href="javascript:;" class="a" data-name="洋河">洋河</a></li>
                                         <li><a href="javascript:;" class="a" data-name="杜康">杜康</a></li>
                                    </ul>
		                         </li>
		                         <li class="has-sub"><a href="#">葡萄酒</a>
		                            <ul class="category-sub">
										<li><a href="javascript:;" class="a" data-name="拉菲">拉菲</a></li>
										<li><a href="javascript:;" class="a" data-name="小企鹅">小企鹅</a></li>
										<li><a href="javascript:;" class="a" data-name="红魔鬼">红魔鬼</a></li>
										<li><a href="javascript:;" class="a" data-name="巴黎之夜">巴黎之夜</a></li>
										<li><a href="javascript:;" class="a" data-name="意大利之花">意大利之花</a></li>
										<li><a href="javascript:;" class="a" data-name="长城">长城</a></li>
										<li><a href="javascript:;" class="a" data-name="奔富">奔富</a></li>
										<li><a href="javascript:;" class="a" data-name="巴洛城堡">巴洛城堡</a></li>
                                    </ul> 
		                         </li>
		                         <li class="has-sub"><a href="#">洋酒</a>
		                             <ul class="category-sub">
										 <li><a href="javascript:;" class="a" data-name="人头马">人头马</a></li>
										 <li><a href="javascript:;" class="a" data-name="芝华士">芝华士</a></li>
										 <li><a href="javascript:;" class="a" data-name="剑南春">剑南春</a></li>
										 <li><a href="javascript:;" class="a" data-name="百龄坛">百龄坛</a></li>
										 <li><a href="javascript:;" class="a" data-name="尊尼获加金牌">尊尼获加金牌</a></li>
										 <li><a href="javascript:;" class="a" data-name="珍宝">珍宝</a></li>
										 <li><a href="javascript:;" class="a" data-name="轩尼诗">轩尼诗</a></li>
										 <li><a href="javascript:;" class="a" data-name="波士">波士</a></li>
                                    </ul>
		                         </li>
		                         <li class="has-sub"><a href="#">啤酒</a>
		                             <ul class="category-sub">
										 <li><a href="javascript:;" class="a" data-name="粉象">粉象</a></li>
										 <li><a href="javascript:;" class="a" data-name="1664">1664</a></li>
										 <li><a href="javascript:;" class="a" data-name="百威">百威</a></li>
										 <li><a href="javascript:;" class="a" data-name="凯撒">凯撒</a></li>
										 <li><a href="javascript:;" class="a" data-name="狩猎神">狩猎神</a></li>
										 <li><a href="javascript:;" class="a" data-name="勇闯天涯">勇闯天涯</a></li>
										 <li><a href="javascript:;" class="a" data-name="青岛">青岛</a></li>
										 <li><a href="javascript:;" class="a" data-name="雪花">雪花</a></li>
                                    </ul>
		                         </li>
		                     </ul>
		                   </div>
		                </div>
		                <div class="shop-sidebar mb-20">
		                    <h3>产地</h3>
		                    <div class="shop-checkbox">
		                        <ul>
		                            <li><a href="javascript:;" class="b" data-name="四川">四川</a>
										<a href="javascript:;" class="b" data-name="法国">法国</a>
										<a href="javascript:;" class="b" data-name="美国">美国</a></li>
		                            <li><a href="javascript:;" class="b" data-name="贵州">贵州</a>
										<a href="javascript:;" class="b" data-name="德国">德国</a>
										<a href="javascript:;" class="b" data-name="英国">英国</a></li>
                                    <li><a href="javascript:;" class="b" data-name="北京">北京</a>
										<a href="javascript:;" class="b" data-name="瑞典">瑞典</a>
										<a href="javascript:;" class="b" data-name="澳大利亚">澳大利亚</a></li>
                                    <li><a href="javascript:;" class="b" data-name="江苏">江苏</a>
										<a href="javascript:;" class="b" data-name="意大利">意大利</a>
										<a href="javascript:;" class="b" data-name="波尔多">波尔多</a>
									</li>
		                        </ul>
		                    </div>
		                </div>
		                <div class="shop-sidebar mb-20">
		                    <h3>价格</h3>
		                    <div class="shop-checkbox">
		                        <ul>
		                            <li><a href="javascript:;" class="c" data-low="0" data-hig="200">￥0 - ￥199</a></li>
		                            <li><a href="javascript:;" class="c" data-low="200" data-hig="400">￥200 - ￥399</a></li>
		                            <li><a href="javascript:;" class="c" data-low="400" data-hig="800">￥400 - ￥799</a></li>
		                            <li><a href="javascript:;" class="c" data-low="800">￥800以上</a></li>
		                        </ul>
		                    </div>
		                </div>

		            </div>
		            <div class="col-lg-9 order-1 order-lg-2">
		                <div class="shop-layout">
		                    <!--Grid & List View Start-->
		                    <div class="shop-topbar-wrapper mb-30 d-md-flex justify-content-md-between align-items-center">
		                        <div class="grid-list-option">
		                             <ul class="nav">
                                      <li>
                                        <a class="active" data-toggle="tab" href="#grid"><i class="ion-grid show_grid"></i></a>
                                      </li>
                                      <li>
                                        <a data-toggle="tab" href="#list"><i class="ion-android-menu show_list"></i></a>
                                      </li>
                                    </ul>
		                         </div>
		                         <!--Toolbar Short Area Start-->
		                         <div class="toolbar-short-area d-md-flex align-items-center">
                                     <div class="toolbar-shorter">
                                        <label>排序方式</label>
                                         <select class="wide nice-select">
                                             <option value="">销售量</option>
                                             <option value="">价格从低到高</option>
                                             <option value="">价格从高到底</option>
                                         </select>
                                     </div>
                                 </div>
		                         <!--Toolbar Short Area End-->
		                    </div>
		                    <!--Grid & List View End-->
		                    <!--Shop Product Start-->
		                    <div class="shop-product">
		                        <div id="myTabContent-2" class="tab-content">
		                            <div id="grid" class="tab-pane fade show active">
		                                <div class="product-grid-view">
		                                    <div class="row">
                                                <div class="col-lg-4 col-xl-4 col-md-4" th:each="addr:${list}">
                                                    <!--Single Product Start-->
                                                    <div class="single-product mb-30">
                                                        <div class="product-img">
                                                            <a th:href="@{/info(commodityNumber=${addr.commodityNumber})}">
                                                                <img class="first-img" th:src="@{${addr.commodityImg}}">
                                                            </a>
                                                            <div class="product-action">
                                                                <ul>
                                                                    <li><a href="cart.html"><i class="ion-bag"></i></a></li>
                                                                    <li><a href="#open-modal" data-toggle="modal"><i class="ion-eye"></i></a></li>
                                                                </ul>
                                                            </div>
                                                        </div>
                                                        <div class="product-content">
                                                            <h4><a th:href="@{/info(commodityNumber=${addr.commodityNumber})}" th:text="${addr.commodityName}">商品名</a></h4>
                                                            <div class="product-price">
                                                                <span class="price" th:text="'￥'+${addr.commodityPrice}">$80.00</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <!--Single Product End-->
                                                </div>
		                                    </div>
		                                </div>
		                            </div>
		                            <div id="list" class="tab-pane fade">
		                                <div class="product-list-view">
		                                    <div class="product-list-item mb-40" th:each="addr:${list}">
		                                        <div class="row">
		                                            <!--Single List Product Start-->
		                                            <div class="col-md-4">
		                                                <div class="single-product">
		                                                    <div class="product-img">
		                                                        <a th:href="@{/info(commodityNumber=${addr.commodityNumber})}">
                                                                    <img class="first-img" th:src="@{${addr.commodityImg}}">
                                                                </a>
		                                                    </div>
		                                                </div>
		                                            </div>
		                                            <div class="col-md-8">
		                                                <div class="product-content shop-list">
		                                                    <h4><a th:href="@{/info(commodityNumber=${addr.commodityNumber})}"></a></h4>
                                                            <div class="product-price">
                                                                <span class="price" th:text="'￥'+${addr.commodityPrice}">$80.00</span>
                                                            </div>
                                                            <div class="product-description">
                                                                <p th:text="${addr.commodityIntroduction}">商品介绍</p>
                                                            </div>
		                                                </div>
		                                            </div>
		                                            <!--Single List Product End-->
		                                        </div>
		                                    </div>
		                                </div>
		                            </div>
		                            <!--Pagination Start-->
                                    <div class="pagination-product d-md-flex justify-content-md-between align-items-center">
                                      <div class="page-list" style="margin: 0 auto;">
                                          <ul>
                                              <li class="prev"><a href="javascript:;" class="page" th:attr="data-name=${type.pageIdx}-1<=0?1:${type.pageIdx}-1"><i class="ion-ios-arrow-left"></i>上一页</a></li>
                                              <li class="active"><a href="javascript:;" class="page" th:attr="data-name=${type.pageIdx}" th:text="${type.pageIdx}">1</a></li>
                                              <li class="next"><a href="javascript:;" class="page" th:attr="data-name=${type.pageIdx}+1>=${count}?${count}:${type.pageIdx}+1">下一页<i class="ion-ios-arrow-right"></i></a></li>
                                          </ul>
                                      </div>
                                    </div>
		                            <!--Pagination End-->
		                        </div>
		                    </div>
		                    <!--Shop Product End-->
		                </div>
		            </div>
		        </div>
		    </div>
		</div>
	</div>

	<script layout:fragment="script">
		$(function () {
			$(".a").click(function () {
				var s=$(this).attr('data-name');
				$("[name=brand]").val(s);
				$("#form").submit();
			});
			$(".b").click(function () {
				var s=$(this).attr('data-name');
				$("[name=origin]").val(s);
				$("#form").submit();
			});
			$(".c").click(function () {
				var min=$(this).attr('data-low');
				$("[name=lowPrice]").val(min);
				var max=$(this).attr('data-hig');
				$("[name=highPrice]").val(max);
				$("#form").submit();

			});
			$(".page").click(function () {
				var s=$(this).attr('data-name');
				$("[name=pageIdx]").val(s);
				$("#form").submit();
			});
			$("form").on("click",function () {
				$("form input[type=hidden]").each(function () {
					this.value=$.trim(this.value);
				})
			})
		})
	</script>

</body>
</html>
